<template>
    <div>
        <m-table name="admin-coupon" :action="action" :search="search" :params="params" ref="table">

            <el-table-column label="优惠券名称" prop="name" />

            <el-table-column label="条件金额" prop="needPrice" />

            <el-table-column label="优惠金额" prop="couponPrice" />

            <el-table-column label="有效期类型" prop="endType">
                <template slot-scope="scope">

                    <span v-if="scope.row.endType == 0">固定时间</span>

                    <span v-if="scope.row.endType == 1">领取后X天</span>

                </template>

            </el-table-column>

            <el-table-column label="有效期" width="220">

                <template slot-scope="scope">

                    <span v-if="scope.row.endType == 0">{{ scope.row.overTime }}</span>

                    <span v-if="scope.row.endType == 1">{{ scope.row.overDay }}天</span>

                </template>

            </el-table-column>

            <el-table-column label="添加时间" prop="created" width="220"></el-table-column>

            <el-table-column label="发放" width="120" fixed="right">
                <template slot-scope="scope">
                    <el-button size="mini" type="danger" @click="handlerSend(scope.row)">发放</el-button>
                </template>
            </el-table-column>

        </m-table>

        <el-dialog title="商户交易金额" :visible.sync="setCoupon.show" width="450px">
            <el-form label-width="100px">
                <el-form-item label="全部发放">
                    <el-switch v-model="setCoupon.data.isAll"></el-switch>
                </el-form-item>

                <el-form-item label="搜索门店" v-if="setCoupon.data.isAll == false">
                    <el-autocomplete class="inline-input"  :fetch-suggestions="queryStore"
                        placeholder="请输入内容" :trigger-on-focus="false" @select="handleStoreSelect"></el-autocomplete>
                </el-form-item>

                <el-form-item>
                    <el-tag :key="tag" v-for="tag in setCoupon.data.selectedStore" closable :disable-transitions="false"
                        @close="removeStore(tag)">
                        {{ tag.value }}
                    </el-tag>
                </el-form-item>




            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitSend">确 定</el-button>
            </div>
        </el-dialog>

    </div>

</template>

<script>
import request from '@/utils/request'
const usedType = [{ id: 0, name: '指定日期' }, { id: 1, name: '领取后N天使用' }]
export default {
    data() {
        return {
            search: [],
            setCoupon: {
                show: false,
                data: {
                    couponId: null,
                    storeIds: [],
                    selectedStore: [],
                    isAll: false,
                }
            },
            action: { remove: true, edit: true, add: true, export: false },
            params: [
                { name: 'id', value: '', hide: true },
                { name: 'name', value: '', label: '名称', type: 'string' },
                { name: 'details', value: '', label: '描述', type: 'string' },
                { name: 'needPrice', value: '', label: '条件金额', type: 'string' },
                { name: 'couponPrice', value: '', label: '优惠金额', type: 'string' },
                { name: 'goodsTypeId', value: '', label: '使用商品分类', type: 'apiSelect', url: '/admin-coupon/goodstype' },
                { name: 'endType', value: '', label: '到期类型', type: 'select', data: usedType },
                { name: 'overTime', value: '', label: '到期日期', type: 'datetime' },
                { name: 'overDay', value: '', label: '到期天数', type: 'string' },
            ]
        }
    },
    methods: {
        handlerSend(e) {
            this.setCoupon.show = true;
            this.setCoupon.data.couponId = e.id;
        },
        async queryStore(queryString, cb) {
           if(!queryString) return
           const res = await request.get(`/admin-store/store/${queryString}`)
           cb(res)
        },
        handleStoreSelect(e){
            let index = this.setCoupon.data.selectedStore.findIndex(item => item.id == e.id)
            if(index != -1) return
            this.setCoupon.data.selectedStore.push(e)
            this.setCoupon.data.storeIds.push(e.id)
        },
        async submitSend(){
            let res = await request.post(`/admin-coupon/send`,this.setCoupon.data)
            this.setCoupon.show = false
            this.$message.success('发放成功')
            this.setCoupon.data.selectedStore = []
            this.setCoupon.data.storeIds = []
        },
        removeStore(e){
            let index = this.setCoupon.data.selectedStore.findIndex(item => item.id == e.id)
            this.setCoupon.data.selectedStore.splice(index,1)
            this.setCoupon.data.storeIds.splice(index,1)
        }
    }
}
</script>